<template>
  <div class="components-container">
    <div class="header-form">
      <el-form ref="form" :model="searchData" label-width="50px">
        <el-form-item class="header-input" label="编号">
          <el-input v-model="searchData.DECNO" placeholder="请输入编号"></el-input>
        </el-form-item>
        <el-form-item class="header-input" label="逝者姓名" label-width="80px">
          <el-input v-model="searchData.DECDEADNAME" placeholder="请输入逝者姓名"></el-input>
        </el-form-item>
        <el-form-item class="header-input" label="状态">
          <el-select v-model="searchData.DECSTATUS" placeholder="请选择">
            <el-option v-for="item in DecstatusOptions" :key="item.Value" :label="item.Text" :value="item.Value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="header-input" style="width:300px;" label=" " label-width="10px">
          <el-button type="primary" @click="getData" :loading="this.$store.state.isloading">搜索</el-button>
          <el-button @click="btnRepeat">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
    <div>
      <ul class="toolList">
        <li v-if="btnShow(item.BTNVALUE)" v-for="(item, index) in $store.state.btnListCommon" :key=index
          @click="operate(item.BTNVALUE)">
          <el-button type="primary" :value="item.BTNSHOWNAME" v-text="item.BTNSHOWNAME"></el-button>
        </li>
      </ul>
    </div>
    <dataTable :headList="headList" :dataList="dataList" :pageOrder="pageOrder" @pageChange="pageChange"
      @selectRow="selectRow"></dataTable>
    <sweet-modal ref="dialog" class="dialog" :sweetModalMaxWidth="pageWidth">
      <h3>{{title}}</h3>
      <div :style="{maxHeight:maxHeight+'px'}" style="overflow:auto;">
        <fieldset class="layui-elem-field layui-field-title">
          <legend style="font-weight: bold;">逝者基本信息</legend>
          <el-form ref="form" :model="jpmData" label-width="100px">
            <el-form-item class="input" label="逝者姓名">
              <el-input v-model="jpmData.Name" placeholder="请输入逝者姓名" :disabled="isDetail"></el-input>
            </el-form-item>
            <el-form-item class="input" label="证件号码">
              <el-input v-model="jpmData.CardNo" placeholder="请输入证件号码" :disabled="isDetail">
                <el-button @click="check" style="outline:none;" slot="append">核对</el-button>
              </el-input>
            </el-form-item>
            <el-form-item class="input" label="死亡日期">
              <el-date-picker style="width:100%" v-model="jpmData.DeathDate" type="date" placeholder="选择日期"
                :disabled="isDetail">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="input" label="预约火化日期">
              <el-date-picker style="width:100%" v-model="jpmData.AppointmentDate" type="date" placeholder="选择日期"
                :disabled="isDetail">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="input" label="联系人">
              <el-input v-model="jpmData.RelationName" placeholder="请输入联系人" :disabled="isDetail"></el-input>
            </el-form-item>
            <el-form-item class="input" label="联系电话">
              <el-input v-model="jpmData.RelationLink" placeholder="请输入联系电话" :disabled="isDetail"></el-input>
            </el-form-item>
            <el-form-item class="input" label="逝者类型">
              <el-select v-model="jpmData.DeceasedType" filterable :disabled="isDetail" > 
                <el-option v-for="item in dietype" :label="item.Text" :value="item.Value" :key="item.Value" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="input" label="火化殡仪馆">
              <el-select v-model="jpmData.BelongSfuneral" filterable :disabled="isDetail" > 
                <el-option v-for="item in funeralOptions" :label="item.ORGNAME" :value="item.ORGID" :key="item.ORGID" ></el-option>
              </el-select>
            </el-form-item>
          <div>
            <el-form-item class="input" label="待办地点"  style="width:302px">
              <el-cascader  style="width:305px"  class="dz"  ref="address"  v-model="arr" :options="addressOptions" change-on-select @change="selectAddr" :disabled="isDetail">
              </el-cascader>            
            </el-form-item>
             <el-form-item class="input">        
                  <el-input type="text" v-model="jpmData.DeceasAddress" style="width:502px" :disabled="isDetail" ></el-input>
            </el-form-item>
          </div>
          </el-form>
        </fieldset>
      </div>
      <div class="layui-form-item btnCenter" v-if="!isDetail">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit" :loading="this.$store.state.isloading">保存</el-button>
      </div>
    </sweet-modal>
  </div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";

.input {
  width: 300px;
  display: inline-block;
}

.header-input {
  display: inline-block;
}

.header-input input {
  width: 200px;
}
</style>
<script>
import dataTable from "@/components/Table/DataTable";
import sweetModal from "@/components/sweetModal";
import apiBase from "@/api/apiBase.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import { manage } from "@/mixins/managePage.js";
export default {
  name: "jointAppointment",
  mixins: [manage],
  data() {
    return {
      searchData: {
        DECNO: null,
        DECDEADNAME: null,
        DECSTATUS: null
      },
      DecstatusOptions: [],
      dataList: [],
      headList: [],
      pageWidth: 1000,
      maxHeight: "",
      jpmData: {
        DeceasedType: null,//逝者类型
      },
      order: null,
      addressOptions: [],
      arr: [],
      isDetail: false,
      dietype: [], //逝者类型选项
      funeralOptions: [], //火化殡仪馆
    };
  },
  methods: {
    // chan(value){
    // console.log('4444',value)
    // },
    //获取逝者类型
    getReserveInfo() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().JointRegistration.GetJpmType,
        res => {
          this.dietype = res.data.content;
          this.jpmData.DeceasedType = this.dietype[1].Value;
        }
      );
    },
    //获取火化登记数据
    getData() {
      let data = {
        PageIndex: this.pageOrder.currentPage,
        PageSize: this.pageOrder.pageSize,
        OrderBy: this.pageOrder.orderType,
        OrderByType: this.pageOrder.orderSort,
        Data: this.searchData
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().JointBooking.JointOrderQuery,
        res => {
          this.dataList = res.data.content.OutData;
          this.pageOrder.totalNum = res.data.content.RecordCount;
        }
      );
    },
    //获取表头
    getColumns() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Column.GetJointAppointmentColumns,
        res => {
          this.headList = res.data.content;
        }
      );
    },
    restructur(value) {
      let arr = JSON.parse(JSON.stringify(value));
      var data = [];
      arr.forEach(item => {
        if (item.Children.length > 0) {
          data.push({
            label: item.SARNAME,
            value: item.SARID,
            children: this.restructur(item.Children)
          });
        } else {
          data.push({
            label: item.SARNAME,
            value: item.SARID
          });
        }
      });
      return data;
    },
    //地址模板(详细地址)
    selectAddr(value) {
      if (this.isAdd == false) {
        if (this.jpmData.DeceasSarId != null) {
          this.jpmData.DeceasAddress = this.jpmData.DeceasSarId + "";
        }
      } else {
        let text = this.$refs.address.currentLabels + "";
        let arr = text.split(",");
        text = arr.join("");
        this.$set(this.jpmData, "DeceasAddress", text);
      }
    },
    init() {
      // 获取级联选择
      apiBase.DoService({}, apiBase.getApiAdress().Code.GetBorough, res => {
        let data = res.data.content;
        this.addressOptions = data.map(item => ({
          label: item.SARNAME,
          value: item.SARID,
          children: item.Children.map(item => ({
            label: item.SARNAME,
            value: item.SARID,
            children: this.restructur(item.Children)
          }))
        }));
      });
      // 获取申报状态
      apiBase.DoService({}, apiBase.getApiAdress().Code.GetDecStatus, res => {
        this.DecstatusOptions = res.data.content;
      });
      // 获取火化殡仪馆
      apiBase.DoService({}, apiBase.getApiAdress().JointRegistration.QueryOrgan, res => {
        this.funeralOptions = res.data.content;
      });
    },
    btnShow(btn) {
      switch (btn) {
        case "预约":
          return true;
          break;
        case "修改":
          if (this.currentRow) {
            return true;
          } else {
            return false;
          }
          break;
        case "取消":
          if (this.currentRow) {
            return true;
          } else {
            return false;
          }
          break;
        default:
      }
    },
    //功能操作
    operate(order) {
      this.isDetail = false;
      this.dataRepeat();
      this.getReserveInfo();
      this.order = order;
      switch (this.order) {
        case "预约":
          this.$refs.dialog.open();
          break;
        case "修改":
          this.detail(this.currentRow.Id);
          this.$refs.dialog.open();
          break;
        case "详情":
          this.isDetail = true;
          this.detail(this.currentRow.Id);
          this.$refs.dialog.open();
          break;
        case "取消":
          this.cancelappoint(this.currentRow.Id);
          break;
        default:
      }
    },
    submit() {
      switch (this.order) {
        case "预约":
          this.appoint();
          break;
        case "修改":
          this.modify(this.currentRow.Id);
          break;
        default:
      }
    },
    appoint() {
      let data = JSON.parse(JSON.stringify(this.jpmData));
      if (data.DeathDate) {
        data.DeathDate = formatDate(data.DeathDate, "yyyyMMdd");
      }
      if (data.AppointmentDate) {
        data.AppointmentDate = formatDate(data.AppointmentDate, "yyyyMMdd");
      }
      data.DeceasSarId = this.arr[this.arr.length - 1];
      apiBase.DoService(
        data,
        apiBase.getApiAdress().JointBooking.JointOrderCreate,
        res => {
          this.$message({
            type: "success",
            message: "预约成功!"
          });
          this.getData();
          this.$refs.dialog.close();
        }
      );
    },
    detail(id) {
      apiBase.DoService(
        {
          id: id
        },
        apiBase.getApiAdress().JointBooking.JointOrderDetail,
        res => {
          this.jpmData = res.data.content;
          this.arr = res.data.content.DeceasSarId.split(",");
        }
      );
    },
    modify(id) {
      let data = JSON.parse(JSON.stringify(this.jpmData));
      if (data.DeathDate) {
        data.DeathDate = formatDate(data.DeathDate, "yyyyMMdd");
      }
      if (data.AppointmentDate) {
        data.AppointmentDate = formatDate(data.AppointmentDate, "yyyyMMdd");
      }
      data.Id = id;
      data.DeceasSarId = this.arr[this.arr.length - 1];
      apiBase.DoService(
        data,
        apiBase.getApiAdress().JointBooking.JointOrderModify,
        res => {
          this.$message({
            type: "success",
            message: "修改成功!"
          });
          this.$refs.dialog.close();
          this.getData();
        }
      );
    },
    cancelappoint(id) {
      apiBase.DoService(
        {
          id: id
        },
        apiBase.getApiAdress().JointBooking.JointOrderDelete,
        res => {
          this.$message({
            type: "success",
            message: "取消预约成功!"
          });
          this.getData();
        }
      );
    },

    //查询条件重置
    btnRepeat() {
      this.searchData = {
        DECNO: null,
        DECDEADNAME: null,
        DECSTATUS: null
      };
      this.getData();
    },
    //数据重置
    dataRepeat() {
      Object.assign(this.$data.jpmData, this.$options.data().jpmData);
      this.arr = [];
      this.jpmData={
       DeceasedType:null,
      },
      this.funeralOptions.forEach((item,index)=>{
        if(item.ORGDTRCODE == localStorage.getItem('orginCode')){
          this.$set(this.jpmData,'BelongSfuneral',item.ORGID)
        }
      })
    },
    check(){
      apiBase.DoService(
        {
          CardNo: this.jpmData.CardNo
        },
        apiBase.getApiAdress().JointBooking.CheckCardNo,
        res => {
          if(res.data.content.JPMNAME){
            this.$message({
              type: "success",
              message: "人口库查询成功!"
            });
            this.$set(this.jpmData,'Name',res.data.content.JPMNAME)
          }else{
            this.$message({
              type: "warning",
              message: "人口库中未查询到!"
            });
          }
        }
      );
    },
  },
  mounted() {},
  components: {
    dataTable,
    sweetModal
  },
  activated() {
    this.getData();
  },
  created() {
    this.getColumns();
    this.init();
  },
  watch: {}
};
</script>
